﻿#easychat {
    position: fixed;
    bottom: 0px;
    right: 0px;
    display: table-cell;
    z-index: 1000;
    color: rgb(255,255,255);
}

#easychat-people {
    display: inline-block;
    position: relative;
    vertical-align: bottom;
    background: rgba(100,100,100,.7);
    box-shadow: 0 0 5px rgb(100,100,100);
    height: 300px;
    width: 200px;
}

#people-header, #people-mystatus {
    height: 25px;
    box-sizing: border-box;
    padding: 2px 5px;
}

#people-list {
    height: 250px;
    box-sizing: border-box;
    overflow: auto;
}


#easychat-people h3 {
    color: rgb(255,255,255);
}


#people-window {
    width: 20px;
    height: 20px;
    position: absolute;
    right: 0px;
    top: 0px;
    cursor: pointer;
    margin: 3px;
    line-height: 20px;
    background: url('/_layouts/15/images/Easy.Chat/glyphicons-215-resize-small.png') no-repeat;
    background-size: 100% 100%;
}


#people-slider {
    position: absolute;
    right: 30px;
    top: 0;
    border: 1px solid #d9d6c4;
    background: #eceadf 20% 20% repeat;
    width: 40px;
    margin: 8px;
}


.ui-slider-handle {
    border: 1px solid #cbc7bd;
    background: #f8f7f6 50% 50% repeat;
    font-weight: bold;
    color: #654b24;
}

#people-list {
    border-top: 1px solid rgba(200,200,200,1);
}


    #people-list .people {
        display: block;
        padding: 5px;
        cursor: pointer;
    }

        #people-list .people.bold {
            font-weight: bold;
        }

        #people-list .people:hover {
            background-color: rgba(200,200,200,.3);
        }

#people-msg {
    position: absolute;
    bottom: 0px;
    width: 240px;
    line-height: 25px;
    overflow: hidden;
    padding-right: 60px;
}


#people-list .status, #easychat-conver .conver .status {
    margin-right: 5px;
    display: block;
    float: left;
    margin-top: 1px;
    width: 15px;
    height: 15px;
    word-wrap: break-word;
    padding: 0px;
}


    #people-list .status.online, #people-mystatus .online, #easychat-conver .conver .status.online {
        background-color: #00CC00;
    }

    #people-list .status.away, #people-mystatus .away, #easychat-conver .conver .status.away {
        background-color: #FFCC00;
    }

    #people-list .status.busy, #people-mystatus .busy, #easychat-conver .conver .status.busy {
        background-color: #CC0000;
    }

    #people-list .status.offline, #people-mystatus .offline, #easychat-conver .conver .status.offline {
        background-color: #444444;
    }

#people-list .name {
    margin-left: 18px;
    margin-right: 2px;
    display: block;
}


#people-mystatus {
    position: absolute;
    bottom: 0px;
    width: 100%;
    padding: 0px 5px;
    box-sizing: border-box;
}


    #people-mystatus input {
        opacity: .3;
        min-width: 20px;
        height: 20px;
        padding: 0px;
        margin: 0px 3px;
    }

        #people-mystatus input:hover {
            border: 1px solid #ddd;
        }

        #people-mystatus input.highlight {
            opacity: 1;
        }


#easychat-conver {
    display: inline-block;
    vertical-align: bottom;
}

    #easychat-conver .conver {
        background: rgba(100,100,100,.7);
        box-shadow: 0 0 5px rgb(100,100,100);
        display: table-cell;
        vertical-align: bottom;
        height: 250px;
        width: 300px;
        position: relative;
        border-left: 1px solid #ddd;
        border-right: 1px solid #ddd;
    }

.conver .header {
    top: 0px;
    position: absolute;
    width: 100%;
    color: rgb(0,0,0);
    background: rgba(255,255,255,.8);
    padding: 3px 5px;
    box-sizing: border-box;
    height: 25px;
}

.conver.highlight .header {
    font-weight: bold;
}

.conver .dragin {
    cursor: pointer;
}

    .conver .dragin #drag-n-drop {
        background: rgba(150,150,150,.6);
        position: absolute;
        top: 25px;
        height: 225px;
        width: 100%;
        left: 0px;
        z-Index: 1000;
        border: 5px dotted #ddd;
    }

.conver .close {
    background: url('/_layouts/15/images/Easy.Chat/glyphicons-208-remove-2.png');
    background-size: 100% 100%;
    float: right;
    margin: 3px;
    width: 15px;
    height: 15px;
    cursor: pointer;
}

.conver .body {
    padding: 3px 5px;
    overflow-y: auto;
    max-height: 200px;
    margin-top: 25px;
}

.conver .pm, .conver .typing {
    display: block;
    clear: both;
    position: relative;
}

.conver .seen {
    clear: both;
    float: right;
    font-weight: bold;
}

.conver .pm .time {
    float: right;
    margin-left: 5px;
    font-style: italic;
    height: 20px;
    width: 20px;
    background: url('/_layouts/15/images/Easy.Chat/glyphicons-55-clock.png');
    background-size: 100% 100%;
}

.conver .pm.me .time {
    float: left;
}

.conver .pm .msg, .conver .typing {
    padding: 2px 5px;
    border-radius: 5px;
    border: 1px solid #ddd;
    margin-bottom: 5px;
    word-wrap: break-word;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.7);
    word-break: break-word;
}



.conver .pm.me .msg {
    float: right;
    margin-left: 20px;
    border-right: 4px solid rgba(255,255,255,.8);
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.conver .pm.you .msg, .conver .typing {
    float: left;
    margin-right: 20px;
    border-left: 4px solid rgba(255,255,255,.8);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.conver .pm img {
    max-height: 50px;
    max-width: 100px;
}

.conver .control input[type='text'] {
    width: 100%;
    box-sizing: border-box;
}


#easychat-people.mini {
    width: 200px;
    height: 50px;
}

.mini h3 {
}

.mini #people-window {
    background: url('/_layouts/15/images/Easy.Chat/glyphicons-216-resize-full.png') no-repeat;
    background-size: 100% 100%;
}

.mini #people-slider {
}

.mini #people-list {
    height: 30px;
}

    .mini #people-list .people {
        padding: 4px 0px;
        width: 30px;
        float: left;
    }

    .mini #people-list .status {
        width: 4px;
        margin-right: 3px;
    }

    .mini #people-list .name {
        margin-left: 8px;
    }

.mini #people-mystatus {
    display: none;
}
